<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">
          <Button type="primary">统计导出</Button>

        <Poptip class="pull-right" placement="bottom-end">
          <Button>说明</Button>
          <div slot="content">
            说明：<br>
            1、按省级、市级2个不同级别对LNG站点个数分布进行统计，通过地图展示。<br>
            2、鼠标悬停在某一区块上时，弹出小框显示当前区块站点总数。<br>
            3、鼠标单击地图上的某一省份，则进入省份的地图，有不同城市的区块。<br>
            4、点击统计导出，统计当前及统计图结果导出为Excel表。
          </div>
        </Poptip>
      </div>

      <div id="chart-map"></div>
    </Card>
    </Row>
  </div>

</template>

<style scoped>

  .top-tip {
    float: right;
    width: 380px;
    padding: 15px;
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    border-radius: 4px;
    line-height: 1.6;
    margin-top: 10px;
    position: absolute;
    right: 24px;
    z-index: 3;
  }

  #chart-map {
    width: 100%;
    height: 600px;
    display: inline-block;
  }

  #chart-map2 {
    width: 100%;
    height: 600px;
    display: inline-block;
  }

  #chart-bar {
    width: 49%;
    height: 600px;
    display: inline-block;
  }
</style>
<script type="text/ecmascript-6">

  //import api from '@/fetch/api';
  import mapJson from '@/assets/mapJson/json.js';
  import * as echarts from 'echarts';
  import 'echarts/component/legend';
  import 'echarts/chart/map';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/visualMap';
  import 'echarts/component/title';

  let myChartMap = null;

  export default {
    beforeMount () {

    },
    mounted() {
      let $this = this;
      myChartMap = echarts.init(document.getElementById('chart-map'));
      echarts.registerMap('swd', mapJson.all);
      $this.optionMap =  {
        title: {
          text: '站点分布统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          min: 0,
          max: 2500,
          left: 'left',
          top: 'bottom',
          text: ['高','低'],           // 文本，默认为数值文本
          calculable: true
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: '站点',
            type: 'map',
            mapType: 'swd',
            roam: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data:[]
          }
        ]
      };

      this.initChart();

      for (var key in mapJson){
        echarts.registerMap(key, mapJson[key]);
      }
      //监听左键事件
      myChartMap.on('click', function (params) {
          console.log(params);
        let city = params.name;
        if ($this.showMap){
          $this.goToChart(city)
        }else {
          $this.initMap();
        }
      });
    },
    data () {
      return {
        showMap: 1,//1为全国地图 0为省
        model1: '',
        input1: '',
        selected: [],
        selecting: '',
      }
    },
    methods: {
      initMap() {
        let $this = this;
        $this.showMap = 1;
        $this.optionMap.series[0].mapType = 'swd';
        $this.optionMap.series[0].markPoint = [];
        $this.optionMap.series[0].data = [
          {name: '北京',value: $this.randomData() },
          {name: '天津',value: $this.randomData() },
          {name: '上海',value: $this.randomData() },
          {name: '重庆',value: $this.randomData() },
          {name: '河北',value: $this.randomData() },
          {name: '河南',value: $this.randomData() },
          {name: '云南',value: $this.randomData() },
          {name: '辽宁',value: $this.randomData() },
          {name: '黑龙江',value: $this.randomData() },
          {name: '湖南',value: $this.randomData() },
          {name: '安徽',value: $this.randomData() },
          {name: '山东',value: $this.randomData() },
          {name: '新疆',value: $this.randomData() },
          {name: '江苏',value: $this.randomData() },
          {name: '浙江',value: $this.randomData() },
          {name: '江西',value: $this.randomData() },
          {name: '湖北',value: $this.randomData() },
          {name: '广西',value: $this.randomData() },
          {name: '甘肃',value: $this.randomData() },
          {name: '山西',value: $this.randomData() },
          {name: '内蒙古',value: $this.randomData() },
          {name: '陕西',value: $this.randomData() },
          {name: '吉林',value: $this.randomData() },
          {name: '福建',value: $this.randomData() },
          {name: '贵州',value: $this.randomData() },
          {name: '广东',value: $this.randomData() },
          {name: '青海',value: $this.randomData() },
          {name: '西藏',value: $this.randomData() },
          {name: '四川',value: $this.randomData() },
          {name: '宁夏',value: $this.randomData() },
          {name: '海南',value: $this.randomData() },
          {name: '台湾',value: $this.randomData() },
          {name: '香港',value: $this.randomData() },
          {name: '澳门',value: $this.randomData() }
        ];
        myChartMap.setOption($this.optionMap);
      },
      goToChart(city){
        let $this = this;
        $this.selected = [];
        $this.showMap = 0;
        $this.optionMap.series[0].mapType = city;
        $this.optionMap.series[0].data = [
          {name: '嘉兴市',value: $this.randomData() },
          {name: '杭州市',value: $this.randomData() }
        ];
        myChartMap.setOption($this.optionMap);
      },
      initChart(){
        this.initMap();
      },
      randomData() {
        return Math.round(Math.random()*1000);
      }
    },
    watch: {
      selected(val){
        console.log(JSON.stringify(val));
      }
    }

  };
</script>
